<template>
  <div class="analysis">
    <van-nav-bar
      title="数据分析"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="content">
      <!-- 图表区域 -->
      <div ref="chartRef" class="chart"></div>

      <!-- 分析数据 -->
      <van-cell-group inset title="分析数据">
        <van-cell title="首付比例" value="30%" />
        <van-cell title="月供收入比" value="50%" />
        <van-cell title="利息总支出" value="560,000元" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'

const router = useRouter()
const chartRef = ref<HTMLElement>()

onMounted(() => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value)
    chart.setOption({
      title: {
        text: '还款构成分析'
      },
      tooltip: {},
      legend: {
        data: ['本金', '利息']
      },
      xAxis: {
        data: ['第1年', '第2年', '第3年', '第4年']
      },
      yAxis: {},
      series: [
        {
          name: '本金',
          type: 'bar',
          data: [54000, 54500, 55000, 55500]
        },
        {
          name: '利息',
          type: 'bar',
          data: [18000, 17500, 17000, 16500]
        }
      ]
    })
  }
})

const onClickLeft = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
@use "@/assets/styles/index.scss" as *;

.analysis {
  height: 100%;
  background-color: $background-color;

  .content {
    padding: 16px;
  }

  .chart {
    height: 300px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 8px;
  }
}
</style> 